<template>
  <!--产品-->
  <div>
    <!--查找-->
    <el-row>
      <el-form :model="productClassifyList" ref="productClassifyList">
        <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
        <el-select value-key="productClassifyId"  v-model="type" placeholder="全部数据" style="width: 120px" @change="changeType" >
          <el-option  v-for="item in productClassifyList" :key="item.productClassifyId"
                      :label="item.productClassifyName" :value="item.productClassifyId"  >
          </el-option>
        </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <!--<el-input placeholder="请输入内容" style="width: 150px"></el-input>
      <el-button type="text">
        <el-button icon="el-icon-search" size="small" >产品主题</el-button>
      </el-button>-->
      <el-input @change="changeType" placeholder="请输入内容"  suffix-icon="el-icon-search" style="width: 150px" v-model="search"></el-input>
      <span>产品名称搜索</span>
      </el-form>
    </el-row>
    <!--产品信息-->
    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <span set-lan="html:产品信息">产品信息</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
      </el-col>
      <!--产品信息dialog-->
      <el-dialog title="产品信息" :visible.sync="dialogFormVisible" @close='closeDialog'  width="60%" style="color: #333333"  >
        <el-form :model="product" ref="product" label-width="100px" :rules="rules">
          <el-divider><span class="font-14-bold">产品信息</span></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="品名:"  prop="productName">
                <el-input  v-model="product.productName" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="型号:" >
                <el-input  v-model="product.productModel" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="编号/条码:"  >
                <el-input  v-model="product.productCode" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类:" prop="productClassifyByProductClassifyId">
                <el-select value-key="productClassifyId"  v-model="product.productClassifyByProductClassifyId" placeholder="未选" style="width: 79%">
                  <el-option  v-for="item in productClassifyList" :key="item.productClassifyId"
                              :label="item.productClassifyName" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
             <el-form-item label="状态:">
              <el-radio-group v-model="radio1">
                <el-radio :label=0>上架</el-radio>
                <el-radio :label=1>下架</el-radio>
              </el-radio-group>
             </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库存:" >
                <el-input  v-model="product.productStock" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="库存上限:">
                <el-input v-model="product.stockUpperLimit" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="价格:" >
                <el-input  v-model="product.productPrice" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="成本价格:" >
                <el-input v-model="product.productCost" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button type="primary" @click="addProduct()">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-row>
    <!--产品信息表格-->
    <el-table ref="multipleTable" :data="productList" tooltip-effect="dark"
              style="width: 100%"  @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="productId" label="ID" wsortable></el-table-column>
      <el-table-column prop="productCode"  label="编号/条码" ></el-table-column>
      <el-table-column prop="productName"  label="品名" ></el-table-column>
      <el-table-column prop="productModel"  label="型号" ></el-table-column>
      <el-table-column prop="productState" label="状态" >
        <template slot-scope="scope">
          <span v-if="scope.row.productState===0">上架</span>
          <span v-if="scope.row.productState===1">下架</span>
        </template>
      </el-table-column>
      <el-table-column prop="productClassifyByProductClassifyId.productClassifyName" label="分类" ></el-table-column>
      <el-table-column prop="productPrice"  label="价格" ></el-table-column>
      <el-table-column prop="productStock"  label="库存" ></el-table-column>
      <el-table-column prop="productCost"  label="成本价格" ></el-table-column>
      <el-table-column prop="" label="操作" width="135px">
        <template slot-scope="scope">
          <router-link :to="{path:'/productview',query: {productId: scope.row.productId}}">
            <el-tooltip class="item" effect="dark" content="视图" placement="bottom">
              <el-button size="mini"
                         icon="el-icon-tickets" type="success" circle></el-button>
            </el-tooltip>
          </router-link>
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button size="mini" @click="handleEdit(scope.row)"
                       icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button size="mini" @click="handleDelete(scope.row)"
                       icon="el-icon-delete" type="danger" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete"
                     @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="16">
        <el-pagination :page-size="pageSize" layout="prev, pager, next, jumper" @current-change="changePage"
                       :total="totalSize"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      pageSize: 10, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      radio1: 0,
      type: '',
      search: '',
      dialogFormVisible: false,
      product: {
        productId: 0,
        productCode: '',
        productState: '',
        productStock: '',
        productCost: '',
        stockUpperLimit: '',
        productModel: '',
        productName: '',
        productPrice: '',
        productClassifyByProductClassifyId: ''
      },
      productList: [],
      productClassifyList: [{productClassifyId: '', productClassifyName: ''}],
      // 表单验证
      rules: {
        productName: [{
          required: true,
          message: '必须填',
          trigger: 'blur'
        }, {
          min: 2,
          max: 8,
          message: '长度在 2 到 8 个字符',
          trigger: 'blur'
        }],
        productClassifyByProductClassifyId: [{
          required: true,
          message: '必须选择',
          trigger: 'blur'
        }]
      },
      mulSelection: []
    }
  },
  methods: {
    initData (currPage, pageSize) {
      this.$axios.get('http://localhost:8088/product-list', {params: {page: currPage, size: pageSize, search: this.search, type: this.type}})
        .then(v => {
          this.productList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    classify () {
      this.$axios.get('http://localhost:8088/product-classify-list')
        .then(v => {
          this.productClassifyList = v.data
        })
        .catch(function (v) {})
    },
    addProduct () {
      this.product.productState = this.radio1
      this.$refs.product.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/product-addProduct', this.product)
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage, this.pageSize)
              // 2、关闭弹框
              this.dialogFormVisible = false
              // 3、重新初始化表单数据模型
              this.product = {
                productId: 0,
                productCode: '',
                productState: '',
                productStock: '',
                productCost: '',
                stockUpperLimit: '',
                productModel: '',
                productName: '',
                productPrice: '',
                productClassifyByProductClassifyId: ''
              }
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changePage (val) {
      this.initData(val, this.pageSize, this.search, this.type)
    },
    changeType () {
      this.initData(1, this.pageSize, this.search, this.type)
    },
    handleEdit (val) {
      this.dialogFormVisible = true
      this.product.productId = val.productId
      this.product.productCode = val.productCode
      this.radio1 = val.productState
      this.product.productStock = val.productStock
      this.product.productCost = val.productCost
      this.product.stockUpperLimit = val.stockUpperLimit
      this.product.productModel = val.productModel
      this.product.productName = val.productName
      this.product.productPrice = val.productPrice
      this.product.productClassifyByProductClassifyId = val.productClassifyByProductClassifyId
    },
    openView (val) {
      this.$axios.post('http://localhost:8080/#/qaview')
    },
    // 关闭dialog事件
    closeDialog () {
      this.$refs.product.resetFields()
      this.product = {
        productId: 0,
        productCode: '',
        productState: '',
        productStock: '',
        productCost: '',
        stockUpperLimit: '',
        productModel: '',
        productName: '',
        productPrice: '',
        productClassifyByProductClassifyId: ''
      }
    },
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    deleteAll () {
      this.mulSelection.forEach(row => {
        console.log(row)
        this.$axios.post('http://localhost:8080/#/qaview', this.qs.stringify(row))
      })
    }
  },
  created: function () {
    this.initData(this.currPage, this.pageSize, this.search, this.type)
    this.classify()
  }
}
</script>

<style>
  .font-14{
    font-size: 14px
  }

  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
</style>
